<template>
	<view>
		<view v-for="(item, index) in couponList" :key="index" class="coupon_box">
			<view class="left">
				<view class="left_top">
					<text class="hui">券</text>
					<text class="hui_name">{{item.name}}</text>
				</view>
				<view class="left_bottom">
					<text>有效日期：{{item.get_start_time}}~{{item.get_end_time}}</text>
				</view>
				<image src="./ylq.png" v-if="item.status == 1" class="ylq"></image>
			</view>
			<view class="right">
				<view class="money" v-if="item.type=='discount'">{{item.amount}}折</view>
				<view class="money" v-else>￥{{item.amount}}</view>
				<text>满{{item.enough}}可用</text>
			</view>

			<view class="bottom">
				<view>
					{{item.use_scope_text}}-{{item.type_text}}
				</view>

				<view class="receiveBtn" :style="{background:item.get_status!='cannot_get' ? colors:'#999999'}"
					@tap="onreceive(item, index)">{{item.get_status_text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getShopCouponGet
	} from "@/apis/index.js"
	export default {
		data() {
			return {

			};
		},

		components: {
			formData() {
				return function() {
					return 123
				}
			}
		},
		props: ['colors', 'couponList'],
		methods: {
			onreceive(item, index) { //领取优惠券
				if (item.get_status == 'cannot_get') {
					return;
					// 向上层传递领取优惠券
				}else{
					
					getShopCouponGet(item.id).then(res=>{
						console.log(res,'-=-=---')
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
						if (res.code==1) {
							
							this.$emit('onReceive',true)
						}
					})
				}

			}

		}
	};
</script>
<style lang="scss" scoped>
	.coupon_box {
		margin: 20upx;
		padding: 20upx;
		box-shadow: 0upx 0upx 10upx #ddd;
		position: relative;
		border-radius: 10upx;
		padding-bottom: 10upx;
		overflow: hidden;

	}

	.coupon_box .left {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		border-bottom: 1upx solid #eee;
		padding-bottom: 20upx;
		position: relative;
	}

	.coupon_box .left .ylq {
		width: 60upx;
		height: 45upx;
		position: absolute;
		top: 0;
		right: 140upx;
	}

	.coupon_box .left .hui {
		width: 40upx;
		height: 40upx;
		font-size: 22upx;
		color: #fff;
		background-color: rgba(255, 84, 110, .8);
		border-radius: 8upx;
		line-height: 40upx;
		text-align: center;
		display: inline-block;
		transform: translateY(-5upx);
	}

	.coupon_box .left .left_top {
		width: 80vw;
		display: block;
		font-size: 26upx;
		font-weight: bold;

	}

	.left_top .hui_name {
		line-height: 60upx;
		height: 60upx;
		margin-left: 20upx;
		display: inline-block;
		font-size: 28upx;
	}

	.left_bottom {
		font-size: 24upx;
		font-weight: 500;
		color: #333;
		height: 60upx;
		line-height: 60upx;
	}

	.coupon_box .right {
		position: absolute;
		right: 20upx;
		top: 25upx;
		text-align: center;
	}

	.coupon_box .right .money {
		font-size: 45upx;
		margin-bottom: 10upx;
	}

	.coupon_box .right text {
		font-size: 24upx;
		color: #999;
	}

	.coupon_box .bottom {
		height: 60upx;
		line-height: 60upx;
		display: flex;
		align-content: flex-start;
		font-size: 24upx;
		margin-top: 10upx;

	}

	.coupon_box .bottom view {
		margin-right: 20upx;
		color: #888;
	}

	.receiveBtn {
		position: absolute;
		left: calc(100vw - 86px);

		width: 58px;
		height: 24px;
		line-height: 24px;

		border-radius: 4px;
		background-color: #fa436a;
		color: white !important;

		font-size: 12px;
		text-align: center;
		margin-top: 2px;

	}
</style>